import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
// import { NavBar, Space, Toast } from 'antd-mobile'
// import { MoreOutline, SearchOutline, } from 'antd-mobile-icons'
import { ArrowLeft, WapHome, WeappNav } from '@react-vant/icons'
// import { DemoBlock } from 'demos'
import style from './Wode.module.css'



const App = () => {

    let [username, setUsername] = useState("")
    let [zhiye, setZhiye] = useState("")
    let [bu, setBu] = useState("")
    let [yxh, setyxh] = useState("")
    let [phone, setphone] = useState("")
    let [imgs, setimgs] = useState("")

    let navigate = useNavigate()

    const getuser = async () => {
        // const res = await axios.get(`http://localhost:3111/get?id=${}`)
        let data = JSON.parse(localStorage.getItem("user"))[0];
        console.log(data.username);
        let { username,zhiye,bumen,phone,youxiang,imgs } = data;
        setUsername(username)
        setZhiye(zhiye)
        setBu(bumen)
        setphone(phone)
        setyxh(youxiang)
        setimgs(imgs)

    }
    // console.log(username);

    useEffect(() => {
        getuser()
    }, [])


    

    return (
        <div >

            <div className={style.top}>
                <div className={style.content}>
                    <div onClick={() => { navigate(-1) }}><ArrowLeft style={{ fontSize: '20px', fontWeight: 'bolder' }} /></div>
                    <div className={style.iconDivider}></div>
                    <div onClick={() => { navigate('/zhu') }}><WapHome style={{ fontSize: '20px', fontWeight: 'bolder', paddingRight: '5px' }} /></div>
                </div>
                <div className={style.content}>
                    <div><WeappNav style={{ fontSize: '25px', fontWeight: 'bolder', paddingLeft: '5px', paddingTop: '5px' }} /></div>
                    <div className={style.iconDivider}></div>
                    <div><div className={style.circleBorder}>
                        <div className={style.circleInner}></div>
                    </div></div>
                </div>
            </div>

            {/* 申报人信息部分 */}
            <div >
                <div >
                    <div style={{ width: '100%', height: "150px", backgroundColor: 'Teal' }}>
                        <div className={style.profilepic}>
                            <img src={imgs} alt="Profile" />
                        </div>
                    </div>

                    <div >
                        <div style={{ marginTop: "90px", marginLeft: "100px" }}>
                            <h1 style={{ marginLeft: '68px', marginTop: "10px", fontSize: '30px' }}>{username}</h1><br></br>
                            <span style={{ marginLeft: "76px", marginBottom: '80px', fontSize: "20px", marginTop: '35px' }}>{zhiye}</span>
                        </div>
                        <div style={{ fontSize: '18px', marginLeft: '150px' }}>建造工程师</div>
                        <div style={{ border: '2px solid #ADD8E6', backgroundColor: '#ADD8E6', width: '73px', height: "19px", margin: "0 auto", fontSize: "16px", marginTop: "5px" }}>Managere</div>
                    </div>
                </div>
            </div>
            <br />
            <hr style={{ height: "5px", color: 'gray', backgroundColor: "gray" }} />
            <div className={style.box1}>
                <div className={style.context} >
                    <label>部门</label>
                    <span>{bu}</span>
                </div>
                <hr style={{ height: "1px", width: "310px", margin: '0 auto', color: 'gray', backgroundColor: "gray", marginTop: "15px", }} />
                <div className={style.context}>
                    <label>职位</label>
                    <span>{zhiye}</span>
                </div>
                <hr style={{ height: "1px", width: "310px", margin: '0 auto', color: 'gray', backgroundColor: "gray", marginTop: "15px", }} />
                <div className={style.context}>
                    <label>联系电话</label>
                    <span>{phone}</span>
                </div>
                <hr style={{ height: "1px", width: "310px", margin: '0 auto', color: 'gray', backgroundColor: "gray", marginTop: "15px", }} />
                <div className={style.context}>
                    <label>电子邮箱</label>
                    <span>{yxh}</span>
                </div>
                <hr style={{ height: "1px", width: "310px", margin: '0 auto', color: 'gray', backgroundColor: "gray", marginTop: "15px", }} />
            </div>
            <button style={{ width: '300px', height: "40px", fontSize: '16px', backgroundColor: '#ADD8E6', border: '0', marginTop: "50px", marginLeft: "3.125rem" }}
                onClick={() => { navigate("/login") }}>退出</button>
        </div>
    );
};

export default App;
